<template>
	<view>
		<c-navbar navEvent :showSafebox="isEmpty ? false : true" :backGround="isEmpty ? '#ffffff' :  '#F1F3F6'">
			<template slot="nav">
				<view class="nav-title">
					工作台
				</view>

			</template>
		</c-navbar>
		<view class="no-project fx-colum-center" v-if="typeList.length===0">
			<image src="/static/no_project.png" mode="widthFix"></image>
			<view class="">当前暂无项目</view>
		</view>

		<view class="workbench-content" v-else>
			<view class="workbench-type fx-center" :style="'top:'+getTop+'px'">
				<scroll-view scroll-x :scroll-into-view="'type'+typeChckIndex" style="width: calc(100% - 60rpx);">
					<view class="fx-center">
						<view class="type-item" :id="'type'+index" :class="typeChckIndex === index ? 'type-check' : ''"
							v-for="(item,index) in typeList" :key="item.id" @click="clickType(index)">{{item.name}}
						</view>
					</view>
				</scroll-view>

				<view class="type-right fx-center-center" @click="showTypeDialog=true">
					<van-icon name="arrow-down" color="#8A8F99" size="30rpx"></van-icon>
				</view>
			</view>
			<van-transition :show="showTypeDialog" :duration="0">
				<view class="mask-box" @click="showTypeDialog=false"></view>
				<view class="type-dialog" :style="'top:'+getTop+'px'">
					<view class="fx-center-between">
						<view class="main-basic-name">我的项目</view>
						<van-icon name="arrow-up" color="#8A8F99" size="30rpx" @click="showTypeDialog=false"></van-icon>
					</view>
					<view class="dialog-item">
						<view class="item-text" :class="typeChckIndex === index ? 'dialog-item-check' : ''"
							v-for="(item,index) in typeList" :key="item.id" @click="clickType(index)">{{item.name}}
						</view>
					</view>
				</view>
			</van-transition>

			<view class="workbench-profit content-box">
				<view class="fx-center-between">
					<view class="profit-title">项目收益<text>本周</text></view>
					<view class="fx-center" @click="toProfit">
						<view class="">全部</view>
						<van-icon name="arrow" color="#8A8F99" size="24rpx"></van-icon>
					</view>
				</view>
				<view class="fx-center">
					<view class="profit-item" @click="toProfit">
						<view class="num">¥{{order_money}}</view>
						<view class="">订单佣金</view>
					</view>
					<view class="profit-item" @click="toProfit">
						<view class="num">¥{{cj_money}}</view>
						<view class="">成交金额</view>
					</view>
					<view class="profit-item" @click="toProfit">
						<view class="num">{{cj_order}}笔</view>
						<view class="">成交订单</view>
					</view>
				</view>
			</view>

			<view class="content-box fx-center notice-box" style="padding: 0 24rpx;" v-if="noticeArr.length>0">
				<image src="/static/laba.png" mode="heightFix"></image>

				<swiper autoplay circular vertical :interval="3000" :duration="500" style="height: 72rpx;width: 100%;">
					<swiper-item v-for="(item,index) in noticeArr" :key="index">
						<view style="line-height: 72rpx;">{{item.text}}</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="content-box workbench-items">
				<view class="items-view" @click="toProfit">
					<image src="/static/xmsy.png" mode="heightFix"></image>
					<view class="">项目收益</view>
				</view>
				<view class="items-view" @click="toDoc">
					<image src="/static/xmwd.png" mode="heightFix"></image>
					<view class="">项目文档</view>
				</view>
				<view class="items-view" @click="toMaterial">
					<image src="/static/ylsc.png" mode="heightFix"></image>
					<view class="">引流素材</view>
				</view>
				<view class="items-view" @click="toFriendCicle">
					<image src="/static/pyq.png" mode="heightFix"></image>
					<view class="">朋友圈素材</view>
				</view>
				<view class="items-view" @click="toTrainCourse">
					<image src="/static/pxkc.png" mode="heightFix"></image>
					<view class="">培训课程</view>
				</view>
				<view class="items-view" @click="toMykehu">
					<image src="/static/wdkh.png" mode="heightFix"></image>
					<view class="">我的客户</view>
				</view>
				<!-- 	<view class="items-view">
					<image src="/static/ltjt.png" mode="heightFix"></image>
					<view class="">聊天截图</view>
				</view> -->
				<view class="items-view" @click="toChatCode">
					<image src="/static/xmgt.png" mode="heightFix"></image>
					<view class="">项目沟通</view>
				</view>
			</view>

			<view class="content-box task-box">
				<view class="fx-center-between">
					<view class="title">任务大厅</view>
					<view class="fx-center task-desc" @click="showDesc">
						<view class="">结算说明</view>
						<image src="/static/wenhao.png" mode="heightFix"></image>
					</view>
				</view>
				<view class="task-item fx-center-between" v-if="show_cj">
					<view class="fx-center">
						<image src="/static/import_cj.png" mode="heightFix"></image>
						<view class="">
							<view class="task-item-title">录入成交客户</view>
							<view class="task-other" @click="toShowProcess(1)">
								任务流程
								<van-icon name="arrow-down" color="#8A8F99" size="24rpx"></van-icon>
							</view>
						</view>
					</view>
					<van-button color="#4078E5" size="small" @click="addSuccess">录入</van-button>
				</view>
				<view class="task-item fx-center-between" v-if="show_clue">
					<view class="fx-center">
						<image src="/static/import_kz.png" mode="heightFix"></image>
						<view class="">
							<view class="task-item-title">录入客资线索</view>
							<view class="task-other" @click="toShowProcess(2)">
								剩余预算 {{clue_budget_rate}}% 任务流程
								<van-icon name="arrow-down" color="#8A8F99" size="24rpx"></van-icon>
							</view>
						</view>
					</view>
					<van-button color="#4078E5" size="small" :custom-style="clue_budget_rate <=0 ? 'opacity: 0.5;':''"
						@click="addClue">录入</van-button>
				</view>
				<view class="task-item fx-center-between" v-if="show_task">
					<view class="fx-center">
						<image src="/static/impore_rwfk.png" mode="heightFix"></image>
						<view class="">
							<view class="task-item-title">录入任务反馈</view>
							<view class="task-other" @click="toShowProcess(3)">
								剩余预算 {{promo_budget_rate}}% 任务流程
								<van-icon name="arrow-down" color="#8A8F99" size="24rpx"></van-icon>
							</view>
						</view>
					</view>
					<van-button color="#4078E5" size="small" :custom-style="promo_budget_rate <=0 ? 'opacity: 0.5;':''"
						@click="addTaskfeedback">录入</van-button>
				</view>
			</view>

		</view>
		<!-- 结算说明弹框 -->
		<c-bottom-dialog ref="descRef" title="结算说明">
			<template>
				<rich-text :nodes="descTitle"></rich-text>
			</template>
		</c-bottom-dialog>
		<!-- 流程提示弹框 -->
		<van-popup :show="showProcess" position="center" :close-on-click-overlay="false"
			custom-style="width: 80%;border-radius: 4rpx" @close="showProcess=false">
			<view class="process-dialog">
				<view class="dialog-title">{{processTitle}}</view>
				<view class="dialog-item">
					<rich-text :nodes="processContent"></rich-text>
				</view>
				<view style="margin-top: 32rpx;">
					<van-button color="#4078E5" block @click="showProcess=false">知道了</van-button>
				</view>
			</view>
		</van-popup>

	</view>
</template>

<script>
	const menuTop = uni.getMenuButtonBoundingClientRect().top
	const menuHeight = uni.getMenuButtonBoundingClientRect().height
	export default {
		data() {
			return {
				isEmpty: false,
				showTypeDialog: false,
				typeChckIndex: 0,
				typeList: [],

				project_id: null,

				order_money: 0, //订单佣金
				cj_money: 0, //成交金额
				cj_order: 0, //成交订单

				show_clue: false, //显示录入客资开单
				show_task: false, //显示任务反馈开单
				show_cj: false, //显示成交订单开开单

				showDescipt: false, //结算说明
				showProcess: false, //流程说明
				processTitle: '', //任务流程标题
				processContent: '', //任务流程内容

				descTitle: '', //结算说明文字


				order_price: 0, //市场合作价
				order_price_rate: 0, //合作价的百分比例
				wx_qrcode_url: '', //客服二维码
				clue_budget_rate: 0, //客资预算比例
				promo_budget_rate: 0, //推广比例

				opened: true, //是否开放

				timer: null,
				noticeArr: [],

				isFirst: true
			};
		},
		onLoad() {
			if (uni.getStorageSync('workbenchIndex')) {
				this.typeChckIndex = Number(uni.getStorageSync('workbenchIndex'))
			}
			this.getMyProject()
		},
		onHide() {
			clearInterval(this.timer)
		},
		onShow() {
			this.intervalNotice()
			if (!this.isFirst) {
				this.getMyProject()
			}
		},
		onPullDownRefresh() {
			this.getMyProject()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		computed: {
			getTop() {
				return Number(menuTop) + Number(menuHeight) + 6
			}
		},
		methods: {
			refrashData(index) {
				uni.setStorageSync('workbenchIndex', index)
				this.project_id = this.typeList[index].id
				this.order_price = this.typeList[index].order_price
				this.order_price_rate = this.typeList[index].order_price_rate
				this.wx_qrcode_url = this.typeList[index].wx_qrcode_url
				this.clue_budget_rate = this.typeList[index].clue_budget_rate
				this.promo_budget_rate = this.typeList[index].promo_budget_rate
				this.opened = this.typeList[index].opened

				let arr = this.typeList[index].task_types
				this.show_clue = arr.includes(1)
				this.show_task = arr.includes(2)
				this.show_cj = arr.includes(4)
				// this.typeList[index].task_types.forEach(item => {
				// 	// 1-客资，2-任务反馈，4-成交订单
				// 	if (item == 1) {
				// 		this.show_clue = true
				// 	}else{}
				// 	if (item == 2) {
				// 		this.show_task = true
				// 	}
				// 	if (item == 4) {
				// 		this.show_cj = true
				// 	}
				// })
				this.getincome()
				this.getNotice()
			},
			// 获取我合作的项目
			getMyProject() {
				this.$api.requst(`/gwc/projects/my`, {}).then((res) => {
					this.typeList = res.data
					if (this.isFirst && !uni.getStorageSync('workbenchIndex')) {
						if (this.typeList.length > 0) {
							this.order_price = this.typeList[0]
							this.refrashData(0)
						}
					} else {
						this.refrashData(this.typeChckIndex)
					}

					this.isFirst = false
				})
			},
			// 获取项目收益统计
			getincome() {
				this.$api.requst(`/gwc/projects/${this.project_id}/stats`, {
					id: this.project_id
				}).then((res) => {
					this.order_money = res.data.earn
					this.cj_money = res.data.sale_rmb
					this.cj_order = res.data.sale_cnt
				})
			},
			// 获取提示信息
			getNotice() {
				this.$api.requst(`/gwc/projects/${this.project_id}/notice`, {
					id: this.project_id
				}).then((res) => {
					// this.noticeText = res.data ? (res.data.text || '') : ''
					this.noticeArr = res.data
				})
			},
			intervalNotice() {
				this.timer = setInterval(() => {
					if (this.project_id) {
						this.getNotice()
					}
				}, 10000)
			},
			clickType(index) {
				this.showTypeDialog = false
				if (this.typeChckIndex != index) {
					this.typeChckIndex = index
					clearInterval(this.timer)
					this.refrashData(index)
					this.intervalNotice()
				}
			},
			// 结算说明
			async showDesc() {
				this.descTitle = await this.$api.getArtical('settle_rule')
				this.$refs.descRef.show()
			},


			// 任务流程
			async toShowProcess(type) {
				if (type === 1) {
					this.processTitle = '成交客户流程'
					this.processContent = await this.$api.getArtical('order_flow')
				}
				if (type === 2) {
					this.processTitle = '录入客资线索流程'
					this.processContent = await this.$api.getArtical('clue_flow')
				}
				if (type === 3) {
					this.processTitle = '录入任务反馈流程'
					this.processContent = await this.$api.getArtical('promo_flow')
				}
				this.showProcess = true
			},
			// 项目收益
			toProfit() {
				uni.navigateTo({
					url: '/pages/workbench/projectProfit/projectProfit?pid=' + this.project_id
				})
			},
			// 项目文档
			toDoc() {
				uni.navigateTo({
					url: '/pages/workbench/projectDoc/projectDoc?pid=' + this.project_id
				})
			},
			// 引流素材
			toMaterial() {
				uni.navigateTo({
					url: '/pages/workbench/material/material?pid=' + this.project_id
				})
			},
			// 朋友圈素材
			toFriendCicle() {
				uni.navigateTo({
					url: '/pages/workbench/friendCircle/friendCircle?pid=' + this.project_id
				})
			},
			// 培训课程
			toTrainCourse() {
				uni.navigateTo({
					url: '/pages/workbench/trainCourse/trainCourse?id=' + this.project_id
				})
			},
			// 我的客户
			toMykehu() {
				uni.navigateTo({
					url: '/pages/workbench/myKehu/myKehu'
				})
			},
			// 项目沟通
			toChatCode() {
				uni.navigateTo({
					url: '/pages/index/chatCode/chatCode?img=' + this.wx_qrcode_url + '&title=业务经理&type=2'
				})
			},
			// 录入成交客户
			addSuccess() {
				if (this.opened) {
					uni.navigateTo({
						url: '/pages/workbench/addSuccessKehu/addSuccessKehu?pid=' + this.project_id + '&pname=' +
							this
							.typeList[this.typeChckIndex].name + '&order_price=' + this.order_price +
							'&order_price_rate=' + this.order_price_rate
					})
				} else {
					this.$api.showError('该项目合作已冻结！')
				}

			},
			// 录入客资线索
			addClue() {
				if (this.clue_budget_rate > 0) {
					if (this.opened) {
						uni.navigateTo({
							url: '/pages/workbench/addClueKehu/addClueKehu?pid=' + this.project_id
						})
					} else {
						this.$api.showError('该项目合作已冻结！')
					}

				} else {
					this.$api.showError('客资线索任务已结束！')
				}
			},
			// 录入任务反馈
			addTaskfeedback() {
				if (this.promo_budget_rate > 0) {
					if (this.opened) {
						uni.navigateTo({
							url: '/pages/workbench/addTaskFeedback/addTaskFeedback?pid=' + this.project_id
						})
					} else {
						this.$api.showError('该项目合作已冻结！')
					}
				} else {
					this.$api.showError('任务反馈任务已结束！')
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-title {
		font-size: 40rpx;
		font-weight: bold;
	}

	.no-project {
		height: 100vh;
		background-color: #fff;
		color: #8A8F99;
		font-size: 26rpx;
		box-sizing: border-box;
		overflow: hidden;

		image {
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 14rpx;
		}
	}

	.workbench-content {
		padding: 0 24rpx 24rpx;
		position: relative;
		box-sizing: border-box;

		.workbench-type {
			overflow: hidden;
			position: sticky;
			// top: 170rpx;
			// padding-bottom: 34rpx;
			// padding-top: 24rpx;
			background: #F1F3F6;
			z-index: 2;


			.type-item {
				white-space: nowrap;
				margin-right: 56rpx;
				font-size: 30rpx;
				color: #8A8F99;
				padding: 24rpx 0 34rpx;
			}

			.type-check {
				color: #161616;
				font-weight: bold;
			}

			.type-right {
				width: 56rpx;
				height: 56rpx;
				background: #F1F3F6;
			}
		}

		.content-box {
			background-color: #fff;
			padding: 24rpx;
			border-radius: 4rpx;
		}

		.workbench-profit {
			color: #8A8F99;
			font-size: 26rpx;
			// margin-top: 34rpx;

			.profit-title {
				font-size: 30rpx;
				color: #161616;

				text {
					font-size: 22rpx;
					margin-left: 16rpx;
					color: #8A8F99;
				}
			}

			.profit-item {
				flex: 1;
				text-align: center;
				margin-top: 36rpx;
				color: #161616;

				.num {
					font-weight: bold;
					margin-bottom: 8rpx;
				}
			}
		}

		.notice-box {
			font-size: 24rpx;
			color: #5C5F66;
			margin-top: 16rpx;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}
		}

		.workbench-items {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 32rpx;
			text-align: center;
			margin-top: 16rpx;

			.items-view {
				font-size: 26rpx;
				color: #161616;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 52rpx;
					height: 52rpx;
					margin-bottom: 10rpx;
				}
			}
		}

		.task-box {
			margin-top: 16rpx;

			.title {
				font-size: 30rpx;
				color: #161616;
			}

			.task-desc {
				color: #8A8F99;
				font-size: 26rpx;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-left: 8rpx;
				}
			}


			.task-item {
				padding: 42rpx 24rpx;
				background: #F1F3F6;
				border-radius: 4rpx;
				margin-top: 24rpx;

				.task-item-title {
					font-size: 30rpx;
					font-weight: bold;
				}

				.task-other {
					color: #8A8F99;
					font-size: 26rpx;
					margin-top: 8rpx;
				}

				image {
					width: 72rpx;
					height: 72rpx;
					margin-right: 24rpx;
				}
			}
		}

	}

	.type-dialog {
		position: fixed;
		// top: 170rpx;
		left: 0;
		right: 0;
		background: #F1F3F6;
		padding: 24rpx 32rpx 32rpx;
		z-index: 100;

		.dialog-item {
			display: grid;
			gap: 16rpx;
			grid-template-columns: 1fr 1fr;
			margin-top: 24rpx;

			.item-text {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				font-size: 30rpx;
				text-align: center;
				background: #FFFFFF;
				padding: 24rpx 0;
				border-radius: 4rpx;
			}

			.dialog-item-check {
				color: #fff;
				background-color: #4078E5;
			}
		}
	}

	.mask-box {
		background-color: rgba(0, 0, 0, .7);
		height: 100%;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 1;
	}

	// 结算说明弹框
	.dialog-item:not(:first-child) {
		margin-top: 32rpx;
	}

	// 流程说明
	.process-dialog {
		padding: 48rpx 32rpx;

		.dialog-title {
			font-weight: bold;
			font-size: 34rpx;
			color: #161616;
			text-align: center;
		}

		.dialog-item {
			font-size: 30rpx;
			color: #161616;
			margin-top: 32rpx;
			line-height: 52rpx;
			text-align: center;
		}
	}

	scroll-view ::-webkit-scrollbar {
		width: 0;
	}
</style>